/* --- EFECTO CURSOR ESTRELLAS --- */
body { cursor: none; }

.cursor {
  width: 24px;
  height: 24px;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFD700"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>');
  background-size: contain;
}

.estrella {
  position: fixed;
  width: 12px;
  height: 12px;
  pointer-events: none;
  z-index: 9998;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFD700"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>');
  background-size: contain;
  animation: brillar 1s ease-out forwards;
}

.brillito {
  position: fixed;
  width: 7px;
  height: 7px;
  pointer-events: none;
  z-index: 9997;
  border-radius: 50%;
  animation: explotar 0.9s ease-out forwards;
}

@keyframes brillar {
 0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0) rotate(360deg); }
}

@keyframes explotar {
 0% { opacity: 1; transform: translate(0, 0) scale(0.5); }
  50% { opacity: 1; transform: translate(calc(var(--x)/2), calc(var(--y)/2)) scale(1.5); }
 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0); }
}






/* --- ESTILOS GENERALES ROSA --- */
body { 
  background: #ffeef8; 
  font-family: Arial; 
  margin: 0; 
  color: #831843;
}

header { 
  background: pink; 
  color: white; 
  text-align: center; 
  padding: 20px; 
}

footer { 
  text-align: center; 
  padding: 10px; 
  background: #ffb6c1; 
  color: white;
}

/* --- LAYOUT DE 3 COLUMNAS --- */
main {
  display: flex;
  gap: 10px;
  padding: 10px;
  align-items: flex-start; /* para que no se estiren */
}

.izquierda { 
  width: 20%; 
  background: #fff0f5; 
  padding: 10px; 
  border-radius: 10px; 
}

.centro { 
  width: 55%; 
  background: white; 
  padding: 15px; 
  border-radius: 10px; 
}

.derecha { 
  width: 25%; /* aquí van todos los cuadritos apilados */
  display: flex;
  flex-direction: column; /* esto los pone uno debajo de otro */
  gap: 15px;
}

/* --- ESTILO DE LINKS Y CUADROS --- */
.izquierda a {
  display: block;
  color: #831843;
  text-decoration: none;
  padding: 3px 0;
}
.izquierda a:hover {
  text-decoration: underline;
}

.derecha .cuadrito, .izquierda .cuadrito-actu {
  background: #ffe4e6; /* rosa clarito */
  border: 2px solid #ffb6c1; /* borde rosa */
  border-radius: 12px;
  padding: 12px;
  width: 100%; /* que ocupen todo */
  color: #831843;
  box-sizing: border-box;
}

.derecha .cuadrito h2, .izquierda .cuadrito-actu h2 {
  font-size: 15px;
  background: #ffb6c1;
  padding: 6px;
  border-radius: 8px;
  text-align: center;
  color: white;
  margin: 0 0 8px 0;
}